<template>
<el-main>
        <div id="course-content">
            <div id="course-icon">
                <el-image style="width: 80px;height: 65px;margin-top: -10px" :src="course.background" class="image"></el-image>
                <span style="color: #ffffff;font-size: 15px;margin-left: 10px">{{course.courseName}}</span>
        </div>
            <div id="course-description">
                <p  style="color: white;font-size: 13px;margin-top: 20px;text-align: left">简介：{{course.description}}</p>
                <el-tooltip class="item" effect="dark" content="编辑课程信息" placement="top-start">
                <el-button  icon="el-icon-edit" style="margin-left: 800px;"  circle @click="editCourse"  ></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除课程" placement="top-end">
                <el-button type="danger" icon="el-icon-delete" style="margin-top: 20px;margin-left: 30px" circle @click="deleteCourse"  ></el-button>
                </el-tooltip>
            </div>
       </div>
    <el-page-header @back="goBack" ></el-page-header>
    <div id="course-option">
        <el-tabs @tab-click="tabClick" v-model="tabsActiveName" type="border-card">
            <el-tab-pane  v-for="item in elTablePaneList" :key="item.name" :label="item.title" :name="item.name">
            </el-tab-pane>
            <router-view v-if="isReloadAlive"></router-view>
        </el-tabs>
    </div>

    <el-dialog width="400px" style="margin-top: -100px" title="编辑课程信息" :visible.sync="editCourseVisible">
        <el-form :model="editCourseFormData" >
            <el-form-item label="课程名">
                <el-input v-model="editCourseFormData.courseName"></el-input>
            </el-form-item>
            <el-form-item label="课程描述">
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="editCourseFormData.description">
                </el-input>
            </el-form-item>
            <el-form-item label="背景图" prop="uploadFile" ref="uploadFile">
                <el-upload
                        class="upload-demo"
                        drag
                        name="file"
                        action="http://localhost:8080/course/upload"
                        :on-success="fileUploadSuccess">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg ,png等图片格式 大小限制在50M以内</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center" class="dialog-footer">
            <el-button type="primary" @click="editCourseSubmit">确 定</el-button>
        </div>
    </el-dialog>
</el-main>
</template>

<script>
export default {
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isReloadAlive:true,
            course: {
                courseId:"",
                background: "",
                courseName: "",
                description: ""
            },
            elTablePaneList: [{
                title:"目录",
                name:"courseMenuTeach",
            },{
                title: "作业",
                name:"courseTaskTeach",
            },{
                title: "考试",
                name:"courseExamTeach",
            },{
                title: "题库",
                name:"courseQuestionTeach",
            },{
                title: "班级",
                name:"courseClass"
            }
            ],
            tabsActiveName:"courseMenuTeach",
            addCourseFileVisible: false,
            editCourseVisible : false,
            editCourseFormData:{
                id:"",
                courseName:"",
                description:"",
                background:""
            }
        }

    },
    created() {
        this.getParams();
        this.$router.push({
            name: this.tabsActiveName,
            query:{
                courseId:this.courseId
            }
        })
    },
    methods: {
        reload() {
            this.isReloadAlive = false;
            this.$nextTick(function(){
                this.isReloadAlive = true;
            })
        },
        goBack(){
            this.$router.push({
                path:"/teachingCenter/myCourse"
            })
        },
        getParams(){
            this.courseId = this.$route.query.courseId;
            this.axios.get(this.urls.getCourseById+"/"+this.courseId)
            .then((res)=>{
                this.course.courseId = res.data.data.id;
                this.course.background = res.data.data.background;
                this.course.description = res.data.data.description;
                this.course.courseName = res.data.data.courseName;
            })
        },
        tabClick(tab){
          this.$router.push({
              name: tab.name,
              query:{
                  courseId:this.courseId
              }
          })
        },
        fileUploadSuccess(response){
            this.editCourseFormData.background = response.data;

        },
        editCourse(){
          this.editCourseFormData.description = this.course.description;
          this.editCourseFormData.courseName = this.course.courseName;
          this.editCourseFormData.id = this.course.courseId;
          this.editCourseFormData.background = this.course.background;
          this.editCourseVisible = true;
        },
        editCourseSubmit() {
          this.axios.post(this.urls.editCourse,this.editCourseFormData)
          .then((res)=>{
              if(res.data.code === 200) {
                  this.$message.success("修改成功")
                  this.editCourseVisible = false;
                  location.reload();
              }
          })
        },
        deleteCourse(){
            this.$confirm("确定要删除 " + this.course.courseName + " 这门课程吗? 其下的课程资源、题库等信息也会被删除", "删除", {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'error'
            }).then(()=>{
                this.axios.get(this.urls.deleteCourse+this.course.courseId)
                .then((res)=>{
                    if(res.data.code===200){
                        this.$message.success("删除成功")
                        this.$router.push({
                            path:"/teachingCenter/myCourse"})
                    }
                })
            })
        }
    },

}
</script>

<style>
    #course-content{
        display: flex;
        background-color: #79BBFF;
        border-radius:15px;
        margin-top: -20px;
    }
    #course-icon{
        position: relative;
        left: 10px;
        top: 30px;
        height: 100px;
        float: left;
    }
    #course-description{
        position: relative;
        width: 1000px;
        height: 100px;
        left: 100px;
    }
    #course-option{
        width: 100%;
        margin-top: 10px;
        background-color: white;
    }
</style>